<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="navbar">
			<view class="navbar-title">员工信息管理</view>
		</view>

		<!-- 搜索和操作区 -->
		<view class="search-bar">
			<view class="search-input">
				<icon type="search" size="16" class="search-icon"></icon>
				<input type="text" placeholder="搜索姓名、手机号..." v-model="searchKeyword" @input="handleSearch" />
			</view>
			<button class="add-btn" @click="showAddModal">
				<icon type="plus" size="18"></icon>
				<text>新增</text>
			</button>
		</view>

		<!-- 筛选区 -->
		<view class="filter-bar">
			<picker @change="onDeptChange" :value="deptIndex" :range="deptOptions">
				<view class="picker-view">
					<text>部门: {{ deptOptions[deptIndex] }}</text>
					<icon type="arrow-down" size="16"></icon>
				</view>
			</picker>
			<picker @change="onStatusChange" :value="statusIndex" :range="statusOptions">
				<view class="picker-view">
					<text>合同状态: {{ statusOptions[statusIndex] }}</text>
					<icon type="arrow-down" size="16"></icon>
				</view>
			</picker>
		</view>

		<!-- 员工列表 -->
		<view class="employee-list">
			<view class="list-header">
				<view class="header-item">姓名</view>
				<view class="header-item">部门/职位</view>
				<view class="header-item">手机</view>
				<view class="header-item">合同状态</view>
				<view class="header-item">操作</view>
			</view>

			<view class="list-item" v-for="(item, index) in filteredEmployees" :key="item._id">
				<view class="list-cell">{{ item.name }}</view>
				<view class="list-cell">
					<text>{{ item.department || '-' }}</text>
					<text class="text-gray">/{{ item.position || '-' }}</text>
				</view>
				<view class="list-cell">{{ item.phone || '-' }}</view>
				<view class="list-cell">
					<text :class="getStatusClass(item.contractStatus)">{{ item.contractStatus || '-' }}</text>
				</view>
				<view class="list-cell operation-cell">
					<button class="edit-btn" @click="showEditModal(item)">编辑</button>
					<button class="delete-btn" @click="showDeleteConfirm(item._id)">删除</button>
				</view>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-if="filteredEmployees.length === 0 && !loading">
				<image src="/static/empty.png" mode="widthFix" class="empty-img"></image>
				<text class="empty-text">暂无员工数据</text>
			</view>

			<!-- 加载中 -->
			<view class="loading-state" v-if="loading">
				<text class="loading-text">加载中...</text>
			</view>
		</view>

		<!-- 分页 -->
		<view class="pagination" v-if="total > 0 && !loading">
			<button class="page-btn" @click="prevPage" :disabled="currentPage <= 1">上一页</button>
			<text class="page-info">{{ currentPage }} / {{ totalPages }}</text>
			<button class="page-btn" @click="nextPage" :disabled="currentPage >= totalPages">下一页</button>
		</view>

		<!-- 新增/编辑模态框 -->
		<view class="modal-mask" v-if="showModal" @click="closeModal"></view>
		<uni-popup ref="popup" type="top">
			<view class="modal">
				<view class="modal-header">
					<text class="modal-title">{{ isEdit ? '编辑员工' : '新增员工' }}</text>
					<icon type="close" size="20" class="modal-close" @click="closeModal"></icon>
				</view>

				<view class="modal-content">
					<form @submit="submitForm">
						<!-- 基本信息 -->
						<view class="form-section">
							<text class="section-title">基本信息</text>

							<view class="form-item">
								<text class="form-label required">姓名</text>
								<input type="text" class="form-input" name="name" v-model="formData.name" placeholder="请输入姓名" required />
							</view>

							<view class="form-item">
								<text class="form-label required">部门</text>
								<picker class="form-picker" @change="onFormDeptChange" :value="formDeptIndex" :range="deptOptions.slice(1)">
									<view class="picker-display">
										{{ formData.department || '请选择部门' }}
										<icon type="arrow-down" size="16"></icon>
									</view>
								</picker>
							</view>

							<view class="form-item">
								<text class="form-label">职位</text>
								<input type="text" class="form-input" name="position" v-model="formData.position" placeholder="请输入职位" />
							</view>

							<view class="form-item">
								<text class="form-label required">手机号</text>
								<input type="number" class="form-input" name="phone" v-model="formData.phone" placeholder="请输入手机号" required />
							</view>

							<view class="form-item">
								<text class="form-label">身份证号</text>
								<input type="text" class="form-input" name="idCard" v-model="formData.idCard" placeholder="请输入身份证号" />
							</view>

							<view class="form-item">
								<picker mode="date" @change="seleData('hireData', $event)">
									<view>入职日期: {{ formData.hireDate || '选择入职日期' }}</view>
								</picker>
							</view>
						</view>

						<!-- 证件上传 -->
						<view class="form-section">
							<text class="section-title">证件上传</text>

							<view class="form-item">
								<text class="form-label">个人相片</text>
								<view class="upload-container">
									<uni-file-picker
										v-model="formData.avatar"
										mode="grid"
										@success="success"
										:image-styles="list_style"
										title=""
										limit="1"
										@delete="deletePic"
										cloudPath="avatar"
									></uni-file-picker>
								</view>
							</view>

							<view class="form-item">
								<text class="form-label">身份证正面</text>
								<view class="upload-container">
									<uni-file-picker
										v-model="formData.idCardFront"
										title=""
										@success="success"
										mode="grid"
										:image-styles="list_style"
										limit="1"
										@delete="deletePic"
										cloudPath="idCard"
									></uni-file-picker>
								</view>
							</view>

							<view class="form-item">
								<text class="form-label">身份证反面</text>
								<view class="upload-container">
									<uni-file-picker
										v-model="formData.idCardBack"
										title=""
										@success="success"
										mode="grid"
										:image-styles="list_style"
										limit="1"
										@delete="deletePic"
										cloudPath="idCard"
									></uni-file-picker>
								</view>
							</view>

							<view class="form-item">
								<text class="form-label">合同文件</text>
								<view class="upload-container">
									<uni-file-picker
										v-model="formData.contractFile"
										title=""
										@delete="deletePic"
										@success="success"
										limit="30"
										mode="grid"
										:image-styles="list_style"
										cloudPath="contractFile"
									></uni-file-picker>
								</view>
							</view>
						</view>

						<!-- 合同信息 -->
						<view class="form-section">
							<text class="section-title">合同信息</text>

							<view class="form-item">
								<picker mode="date" @change="seleData('start', $event)">
									<view>
										<text class="form-label">合同开始日期 :{{ formData.contractStartDate || '选择合同开始日期' }}</text>
									</view>
								</picker>
							</view>

							<view class="form-item">
								<picker mode="date" :start="formData.contractStartDate" @change="seleData('end', $event)">
									<view>
										<text class="form-label">合同结束日期:{{ formData.contractEndDate || '选择合同结束日期' }}</text>
									</view>
								</picker>
							</view>

							<view class="form-item">
								<text class="form-label">合同状态</text>
								<picker class="form-picker" @change="onContractStatusChange" :value="contractStatusIndex" :range="statusOptions.slice(1)">
									<view class="picker-display">
										{{ formData.contractStatus || '请选择状态' }}
										<icon type="arrow-down" size="16"></icon>
									</view>
								</picker>
							</view>
						</view>

						<!-- 提交按钮 -->
						<view class="form-actions">
							<button class="cancel-btn" form-type="reset" @click="closeModal">取消</button>
							<button class="submit-btn" form-type="submit">保存</button>
						</view>
					</form>
				</view>
			</view>
		</uni-popup>

		<!-- 删除确认框 -->
		<view class="modal-mask" v-if="showDeleteModal" @click="showDeleteModal = false"></view>
		<view class="confirm-modal" v-if="showDeleteModal">
			<text class="confirm-title">确认删除</text>
			<text class="confirm-content">确定要删除这条员工记录吗？此操作不可撤销。</text>
			<view class="confirm-actions">
				<button class="cancel-btn" @click="showDeleteModal = false">取消</button>
				<button class="delete-btn" @click="confirmDelete">删除</button>
			</view>
		</view>
	</view>
</template>

<script>
const employeeDB = uniCloud.importObject('employee');
import { userMainStore } from '@/store/mainStore.js';
const mainStore = userMainStore();

export default {
	data() {
		return {
			// 员工数据
			delFileIDs: [],
			employees: [],
			filteredEmployees: [],
			loading: true,
			total: 0,
			pageSize: 10,
			currentPage: 1,

			// 搜索和筛选条件
			searchKeyword: '',
			deptOptions: ['全部', '技术部', '人事部', '财务部', '市场部', '销售部', '行政部'],
			deptIndex: 0,
			statusOptions: ['全部', '有效', '过期', '续签中'],
			statusIndex: 0,

			// 模态框状态
			showModal: false,
			isEdit: false,
			currentId: '',
			showDeleteModal: false,

			// 表单数据
			formData: {
				name: '',
				uid: '',
				department: '',
				position: '',
				phone: '',
				idCard: '',
				hireDate: '',
				avatar: {},
				idCardFront: {},
				idCardBack: {},
				contractFile: [],
				contractStartDate: '',
				contractEndDate: '',
				contractStatus: ''
			},

			// 下拉选项索引
			formDeptIndex: 0,
			contractStatusIndex: 0,
			list_style: {
				height: 120, // 边框高度
				width: 120, // 边框宽度
				border: {
					// 如果为 Boolean 值，可以控制边框显示与否
					color: '#eee', // 边框颜色
					width: '1px', // 边框宽度
					style: 'solid', // 边框样式
					radius: '10%' // 边框圆角，支持百分比
				}
			}
		};
	},

	computed: {
		totalPages() {
			return Math.ceil(this.total / this.pageSize);
		}
	},

	mounted() {
		this.loadEmployees();
	},

	methods: {
		// 加载员工数据
		async loadEmployees() {
			this.loading = true;
			try {
				// 调用云对象获取数据
				console.log('主体信息', JSON.stringify(mainStore.mainObject));
				const res = await employeeDB.getList({
					keyword: this.searchKeyword,
					department: this.deptOptions[this.deptIndex],
					contractStatus: this.statusOptions[this.statusIndex],
					page: this.currentPage,
					pageSize: this.pageSize,
					mainBody: mainStore.mainObject
				});

				if (res.code === 200) {
					this.employees = res.data;
					this.total = res.total;
					this.filterEmployees();
				} else {
					uni.showToast({
						title: res.message || '加载失败',
						icon: 'none'
					});
				}
			} catch (err) {
				console.error('加载员工数据失败', err);
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				});
			} finally {
				this.loading = false;
			}
		},
		success(e) {
			console.log('上传成功', JSON.stringify(e));
		},
		deletePic(e) {
			this.delFileIDs.push(e.fileID);

			console.log('删除', JSON.stringify(e));
		},
		async delFile() {
			const res = employeeDB.delFile(this.delFileIDs);
			console.log('删除云文件成功', JSON.stringify(res));
		},
		// 筛选员工
		filterEmployees() {
			let result = [...this.employees];

			// 搜索筛选
			if (this.searchKeyword) {
				const keyword = this.searchKeyword.toLowerCase();
				result = result.filter((item) => item.name.toLowerCase().includes(keyword) || item.phone.includes(keyword) || (item.idCard && item.idCard.includes(keyword)));
			}

			// 部门筛选
			if (this.deptIndex > 0) {
				const dept = this.deptOptions[this.deptIndex];
				result = result.filter((item) => item.department === dept);
			}

			// 状态筛选
			if (this.statusIndex > 0) {
				const status = this.statusOptions[this.statusIndex];
				result = result.filter((item) => item.contractStatus === status);
			}

			this.filteredEmployees = result;
		},

		// 搜索处理
		handleSearch() {
			this.currentPage = 1;
			this.loadEmployees();
		},
		seleData(type, e) {
			if (type === 'start') {
				this.formData.contractStartDate = e.detail.value;
			}
			if (type === 'end') {
				this.formData.contractEndDate = e.detail.value;
			}
			if (type === 'hireData') {
				this.formData.hireDate = e.detail.value;
			}
		},
		// 部门筛选变化
		onDeptChange(e) {
			this.deptIndex = e.detail.value;
			this.currentPage = 1;
			this.loadEmployees();
		},

		// 状态筛选变化
		onStatusChange(e) {
			this.statusIndex = e.detail.value;
			this.currentPage = 1;
			this.loadEmployees();
		},

		// 上一页
		prevPage() {
			if (this.currentPage > 1) {
				this.currentPage--;
				this.loadEmployees();
			}
		},

		// 下一页
		nextPage() {
			if (this.currentPage < this.totalPages) {
				this.currentPage++;
				this.loadEmployees();
			}
		},

		// 显示新增模态框
		showAddModal() {
			this.$refs.popup.open();
			this.isEdit = false;
			this.currentId = '';
			this.resetForm();
		},

		// 显示编辑模态框
		async showEditModal(item) {
			this.isEdit = true;
			this.currentId = item._id;
			this.$refs.popup.open();
			try {
				// 获取员工详情
				const res = await employeeDB.getDetail(item._id);
				if (res.code === 200) {
					this.formData = { ...res.data };

					// 设置下拉框选中值
					this.formDeptIndex = this.deptOptions.slice(1).indexOf(this.formData.department) || 0;
					this.contractStatusIndex = this.statusOptions.slice(1).indexOf(this.formData.contractStatus) || 0;

					this.showModal = true;
				} else {
					uni.showToast({
						title: res.message || '获取详情失败',
						icon: 'none'
					});
				}
			} catch (err) {
				console.error('获取员工详情失败', err);
				uni.showToast({
					title: '获取详情失败',
					icon: 'none'
				});
			}
		},

		// 关闭模态框
		closeModal() {
			this.showModal = false;
			this.$refs.popup.close();
		},

		// 重置表单
		resetForm() {
			this.formData = {
				name: '',
				uid: '',
				department: '',
				position: '',
				phone: '',
				idCard: '',
				hireDate: '',
				avatar: {},
				idCardFront: {},
				idCardBack: {},
				contractFile: [],
				contractStartDate: '',
				contractEndDate: '',
				contractStatus: ''
			};
			this.formDeptIndex = 0;
			this.mainTypeIndex = 0;
			this.contractStatusIndex = 0;
		},

		// 表单部门变化
		onFormDeptChange(e) {
			this.formDeptIndex = e.detail.value;
			this.formData.department = this.deptOptions.slice(1)[this.formDeptIndex];
		},

		// 合同状态变化
		onContractStatusChange(e) {
			this.contractStatusIndex = e.detail.value;
			this.formData.contractStatus = this.statusOptions.slice(1)[this.contractStatusIndex];
		},

		// 提交表单
		async submitForm() {
			if (!this.formData.name || !this.formData.department || !this.formData.phone) {
				uni.showToast({
					title: '请填写必填字段',
					icon: 'none'
				});
				return;
			}

			uni.showLoading({ title: '保存中...' });

			try {
				const form = { ...this.formData, mainBody: mainStore.mainObject };
				if (this.isEdit) {
					// 编辑操作

					const res = await employeeDB.update(this.currentId, form);
					if (res.code === 200) {
						uni.showToast({ title: '修改成功', icon: 'success' });
								this.closeModal()
					} else {
						uni.showToast({ title: res.message || '修改失败', icon: 'none' });
					}
				} else {
					// 新增操作
					const res = await employeeDB.add(form);
					if (res.code === 200) {
						uni.showToast({ title: '新增成功', icon: 'success' });
						this.closeModal()
					} else {
						uni.showToast({ title: res.message || '新增失败', icon: 'none' });
					}
				}

				this.showModal = false;
				this.loadEmployees();
			} catch (err) {
				console.error('提交失败', err);
				uni.showToast({
					title: '操作失败',
					icon: 'none'
				});
			} finally {
				uni.hideLoading();
			}
		},

		// 显示删除确认
		showDeleteConfirm(id) {
			this.currentId = id;
			this.showDeleteModal = true;
		},

		// 确认删除
		async confirmDelete() {
			uni.showLoading({ title: '删除中...' });

			try {
				const res = await employeeDB.delete(this.currentId);
				if (res.code === 200) {
					uni.showToast({ title: '删除成功', icon: 'success' });
					this.loadEmployees();
				} else {
					uni.showToast({ title: res.message || '删除失败', icon: 'none' });
				}
				this.showDeleteModal = false;
			} catch (err) {
				console.error('删除失败', err);
				uni.showToast({
					title: '删除失败',
					icon: 'none'
				});
			} finally {
				uni.hideLoading();
			}
		},

		// 根据状态获取样式类
		getStatusClass(status) {
			switch (status) {
				case '有效':
					return 'status-active';
				case '过期':
					return 'status-expired';
				case '续签中':
					return 'status-renew';
				default:
					return '';
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	min-width: 70%;
	min-height: 100vh;
	background-color: #f5f5f5;
}

/* 导航栏 */
.navbar {
	height: 44px;
	background-color: #165dff;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.navbar-title {
	color: #fff;
	font-size: 18px;
	font-weight: bold;
}

/* 搜索栏 */
.search-bar {
	padding: 10px;
	background-color: #fff;
	display: flex;
	gap: 10px;
}

.search-input {
	flex: 1;
	display: flex;
	align-items: center;
	background-color: #f5f5f5;
	border-radius: 20px;
	padding: 0 15px;
	height: 36px;
}

.search-icon {
	color: #999;
	margin-right: 5px;
}

.search-input input {
	flex: 1;
	background: transparent;
	border: none;
	height: 100%;
	font-size: 14px;
}

.add-btn {
	width: 80px;
	height: 36px;
	background-color: #165dff;
	color: #fff;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	padding: 0;
}

/* 筛选栏 */
.filter-bar {
	display: flex;
	padding: 0 10px 10px;
	gap: 10px;
	background-color: #fff;
}

.picker-view {
	flex: 1;
	background-color: #f5f5f5;
	border-radius: 4px;
	padding: 8px 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
}

/* 员工列表 */
.employee-list {
	flex: 1;
	background-color: #fff;
	margin: 10px;
	border-radius: 8px;
	overflow: hidden;
}

.list-header {
	display: flex;
	background-color: #f5f5f5;
	padding: 10px 0;
	font-weight: bold;
	font-size: 14px;
}

.header-item {
	flex: 1;
	text-align: center;
	padding: 0 5px;
}

.header-item:last-child {
	flex: 1.5;
}

.list-item {
	display: flex;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid #eee;
	font-size: 14px;
}

.list-cell {
	flex: 1;
	text-align: center;
	padding: 0 5px;
	word-break: break-all;
}

.operation-cell {
	flex: 1.5;
	display: flex;
	justify-content: center;
	gap: 5px;
}

.edit-btn {
	padding: 5px 10px;
	background-color: #f0f7ff;
	color: #165dff;
	border-radius: 4px;
	font-size: 12px;
	line-height: 1;
}

.delete-btn {
	padding: 5px 10px;
	background-color: #fff2f0;
	color: #f5222d;
	border-radius: 4px;
	font-size: 12px;
	line-height: 1;
}

/* 状态样式 */
.status-active {
	color: #52c41a;
}

.status-expired {
	color: #f5222d;
}

.status-renew {
	color: #faad14;
}

.text-gray {
	color: #999;
}

/* 空状态 */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 50px 0;
}

.empty-img {
	width: 120px;
	margin-bottom: 15px;
}

.empty-text {
	color: #999;
	font-size: 14px;
}

/* 加载状态 */
.loading-state {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 50px 0;
	flex-direction: column;
}

.loading-text {
	color: #999;
	font-size: 14px;
	margin-top: 10px;
}

/* 分页 */
.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 15px 0;
	gap: 15px;
}

.page-btn {
	padding: 5px 15px;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 14px;
}

.page-btn:disabled {
	color: #999;
	background-color: #f5f5f5;
}

.page-info {
	font-size: 14px;
	color: #666;
}

/* 模态框 */
.modal-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 999;
}

.modal {
	max-width: 70%;
	background-color: #fff;
	border-radius: 10rpx;
	max-height: 80vh;
	overflow-y: auto;
	margin: 0 auto;
}

.modal-header {
	padding: 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #eee;
}

.modal-title {
	font-size: 18px;
	font-weight: bold;
}

.modal-close {
	color: #999;
}

.modal-content {
	padding: 15px;
}

/* 表单样式 */
.form-section {
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: 1px solid #f5f5f5;
}

.form-section:last-child {
	border-bottom: none;
}

.section-title {
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 15px;
	display: block;
	color: #333;
	padding-left: 5px;
	border-left: 3px solid #165dff;
}

.form-item {
	display: flex;
	flex-direction: column;
	margin-bottom: 15px;
}

.form-label {
	font-size: 14px;
	color: #666;
	margin-bottom: 5px;
}

.required::after {
	content: '*';
	color: #f5222d;
	margin-left: 3px;
}

.form-input {
	height: 40px;
	border: 1px solid #ddd;
	border-radius: 6px;
	padding: 0 10px;
	font-size: 14px;
}

.form-picker {
	height: 40px;
	border: 1px solid #ddd;
	border-radius: 6px;
	overflow: hidden;
}

.picker-display {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 10px;
	font-size: 14px;
	color: #333;
}

/* 上传区域样式 */
.upload-container {
	display: flex;
	gap: 10px;
	align-items: center;
}

.upload-area {
	width: 100px;
	height: 100px;
	border: 1px dashed #ddd;
	border-radius: 6px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #999;
	background-color: #fafafa;
}

.upload-icon {
	margin-bottom: 5px;
}

.upload-text {
	font-size: 12px;
}

.preview-area {
	width: 100px;
	height: 100px;
	border-radius: 6px;
	overflow: hidden;
	position: relative;
}

.preview-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.file-preview {
	height: 40px;
	flex: 1;
	border: 1px solid #eee;
	border-radius: 6px;
	display: flex;
	align-items: center;
	padding: 0 10px;
	position: relative;
}

.file-icon {
	color: #165dff;
	margin-right: 8px;
}

.file-name {
	font-size: 14px;
	color: #333;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
}

.clear-icon {
	position: absolute;
	top: -5px;
	right: -5px;
	background-color: #fff;
	border-radius: 50%;
	color: #f5222d;
	z-index: 10;
}

.form-actions {
	display: flex;
	gap: 15px;
	margin-top: 30px;
}

.cancel-btn {
	flex: 1;
	height: 44px;
	background-color: #f5f5f5;
	color: #333;
	border-radius: 6px;
	font-size: 16px;
}

.submit-btn {
	flex: 1;
	height: 44px;
	background-color: #165dff;
	color: #fff;
	border-radius: 6px;
	font-size: 16px;
}

/* 确认框 */
.confirm-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #fff;
	border-radius: 8px;
	width: 85%;
	max-width: 400px;
	z-index: 1000;
	padding: 20px;
}

.confirm-title {
	font-size: 18px;
	font-weight: bold;
	display: block;
	text-align: center;
	margin-bottom: 15px;
}

.confirm-content {
	font-size: 14px;
	color: #666;
	text-align: center;
	margin-bottom: 20px;
}

.confirm-actions {
	display: flex;
	gap: 10px;
}
</style>
